import axios from 'axios'
import React, { useEffect, useState } from 'react'
import { RouteComponentProps } from 'react-router-dom'

export default function Film(props: RouteComponentProps) {
    const [list, setList] = useState<IItem[]>([])
    useEffect(
        () => {
            axios({
                url: 'https://m.maizuo.com/gateway?cityId=110100&pageNum=1&pageSize=10&type=1&k=1324796',
                headers: {
                    'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.1","e":"16812175742925156196417537"}',
                    'X-Host': 'mall.film-ticket.film.list'
                }
            }).then((res) => {
                setList(res.data.data.films)
            })
        }, []
    )
    return (
        <div>
            <ul>
                {
                    list.map((item) =>
                        <li key={item.filmId} onClick={() => {
                            props.history.push(`/detail/${item.filmId}`)
                        }}> {item.name} </li>
                    )
                }
            </ul>
        </div>
    )
}

interface IItem {
    filmId: number,
    name: string
}
